<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__CSS__/common.css" rel="stylesheet" type="text/css" />
<link href="__CSS__/style.css" rel="stylesheet" type="text/css" />
<script src="__JS__/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="__JS__/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="__JS__/common_js.js" type="text/javascript"></script>
<script src="__JS__/footer.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品详情</title>
<link href="__CSS__/base.css" rel="stylesheet" type="text/css" />
<link href="__CSS__/css.css" rel="stylesheet" type="text/css" />
<link href="__CSS__/style1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__JS__/jquery-1.8.3.min.js"></script>
<script src="__JS__/jquery.simpleGal.js"></script>
<script type="text/javascript" src="__JS__/jquery.imagezoom.min.js"></script>
<script type="text/javascript" charset="UTF-8">
<!--
 //点击效果start
 function infonav_more_down(index)
 {
  var inHeight = ($("div[class='p_f_name infonav_hidden']").eq(index).find('p').length)*30;//先设置了P的高度，然后计算所有P的高度
  if(inHeight > 60){
   $("div[class='p_f_name infonav_hidden']").eq(index).animate({height:inHeight});
   $(".infonav_more").eq(index).replaceWith('<p class="infonav_more"><a class="more"  onclick="infonav_more_up('+index+');return false;" href="javascript:">收起<em class="pulldown"></em></a></p>');
  }else{
   return false;
  }
 }
 function infonav_more_up(index)
 {
  var infonav_height = 85;
  $("div[class='p_f_name infonav_hidden']").eq(index).animate({height:infonav_height});
  $(".infonav_more").eq(index).replaceWith('<p class="infonav_more"> <a class="more" onclick="infonav_more_down('+index+');return false;" href="javascript:">更多<em class="pullup"></em></a></p>');
 }
   
 function onclick(event) {
  info_more_down();
 return false;
 }
 //点击效果end  
//-->
</script>
<style>

img {
	max-width: none;
}
.tb-pic a {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.tb-pic a img {
	vertical-align: middle;
}
.tb-pic a {
*display:block;
*font-family:Arial;
*line-height:1;
}
.tb-thumb {
	margin: 10px 0 0;
	overflow: hidden;
}
.tb-thumb li {
	float: left;
	width: 86px;
	height: 86px;
	overflow: hidden;
	border: 1px solid #cdcdcd;
	margin-right: 5px;
}
.tb-thumb li:hover, .tb-thumb .tb-selected {
	width: 84px;
	height: 84px;
	border: 2px solid #799e0f;
}
.tb-s310, .tb-s310 a {
	height: 365px;
	width: 365px;
}
.tb-s310, .tb-s310 img {
	max-height: 365px;
	max-width: 365px;
}
.tb-booth {
	border: 1px solid #CDCDCD;
	position: relative;
	z-index: 1;
}
div.zoomDiv {
	z-index: 999;
	position: absolute;
	top: 0px;
	left: 0px;
	background: #ffffff;
	border: 1px solid #ccc;
	display: none;
	overflow: hidden;
}
div.zoomMask {
	position: absolute;
	background: url("images/mask.png") repeat;
	cursor: move;
	z-index: 1;
}
<!--弹出隐藏层-->
 .black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 1200px;
	background-color: black;
	z-index: 9999;
	-moz-opacity: 0.4;
	opacity: 0.40;
	filter: alpha(opacity=40);
}
.white_content {
	display: none;
	position: absolute;
	top: 20%;
	left: 40%;
	width: 400px;
	height: 175px;
	border: none;
	background-color: white;
	z-index: 100200;
	overflow: auto;
}
.white_content_small {
	display: none;
	position: absolute;
	top: 20%;
	left: 30%;
	width: 40%;
	height: 50%;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
.dialogbox {
	padding: 20px;
	line-height: 40px;
}
.addbtn {
	width: 22px;
	height: 22px;
	background: url(images/close2.png) no-repeat;
	margin-right: 5px;
	margin-top: 3px;
	border: none;
	float: right;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};

</script>
</head>

<body>
<div id="header_top">
    <div id="top">
        <div class="Inside_pages">
          <div class="Collection">
            <if condition="is_login()"> 
                <span id="loginbtn"  class="green">{:get_username()}</span>
               <a href="{:U('User/logout')}" class="f12">退出</a>
                <else />
                <a href="{:U('User/login')}" class="green">请登录</a> 
                <a href="{:U('User/register')}" class="green">免费注册</a>
                </if>
            </div>
            <div class="hd_top_manu clearfix">
                <ul class="clearfix">
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover">
                    <a href="{:U('Index/index')}">首页</a></li>
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover">
                    <a href="#">消息中心</a></li>
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover">
                    <a href="{:U('Leibiao/index')}">商品列表</a></li>
                    <li class="hd_menu_tit" data-addclass="hd_menu_hover">
                    <a href="#">我的购物车<b></b></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="header"  class="header page_style">
        <div class="logo"><a href="index.html"><img src="/Public/Home/images/logo.png" /></a></div>
        <!--结束图层-->
        <form class="Search" method="post" action="{:U('Lei/index')}">
            <div class="search_list">
                <ul>
                    <li class="current">产品</li>
                </ul>
            </div>
            <div class="clear search_cur">
                <input name="title" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text" value="">
                <input name="" type="submit" value="搜 索"  class="Search_btn"/>
            </div>
        </form>
        <!--购物车样式-->
        <div class="hd_Shopping_list" id="Shopping_list">
            <div class="s_cart">
            <a href="{:U('Shops/index')}">我的购物车</a>
           
        
             </div>
        </div>
    </div>
    <div class="Navigation" id="Navigation">
         <ul class="Navigation_name">
            <li><a href="{:U('Index/index')}">首页</a></li>
       <li class="hour">
       <span class="bg_muen">
            </span>
            <a>半小时生活圈</a></li>
            <li><a href="{:U('Leibiao/index')}">新品专区</a>
            <em class="hot_icon"></em></li>
            
         </ul>           
        </div>
    <script>$("#Navigation").slide({titCell:".Navigation_name li",trigger:"click"});</script> 
</div>
</head>

<!--网站头部-->
<div class="sup-wid" style="margin-left: 200px">
    <div class="supplie-top">
    <div class=" clear bread">
        <a href="#">首页</a>&gt;
        <volist name="cate" id="v">{$v.title}&gt;</volist>
     </div>
</div>
    <div class="pro_detail" >
        <div class="pro_detail_img float-lt">
            <div class="gallery">
         <div class="tb-booth tb-pic tb-s310">
                 <a href="">
                 <img src="/Uploads/{$goods['pic']}" style="width: 366px;height: 366px;" alt="展品细节展示放大镜特效" rel="/Uploads/{$goods['pic']}" class="jqzoom" /></a> </div>
                <ul class="tb-thumb" id="thumblist">
                    <li style="margin-right:0px;">
                        <div class="tb-pic tb-s40"><a href="#"><img src="/Uploads/{$goods['pic']}"  mid="/Uploads/{$goods['pic']}" big="/Uploads/{$goods['pic']}"></a></div> 
                    </li>
                </ul>
            </div>
            <script type="text/javascript">
      $(function(){
                $("#h1").toggle(function(){
                    $("#h1").css("background-image","url('images/iconfont-xingxingman_add.png')");
                },function(){
                    $("#h1").css("background-image","url('imagesiconfont-xingxingman_add.png') ");
                })
            }) 

</script>
        </div>
            <div class="float-lt pro_detail_con">
            <div class="pro_detail_tit">{$goods.title}</div>
            <div class="pro_detail_ad">{$goods.des}</div>
            <div class="clear"></div>
            <div class="pro_detail_price  margin-t20">
            <span class="margin-r20">市场价</span>
            <span style=" font-size:16px" id="aaa">
            <s>1111111</s></span></div>
            <div class="clear"></div>
            <div class="pro_detail_act margin-t20 fl">
            <span class="margin-r20">售价</span>
            <span style="font-size:26px; font-weight:bold; color:#dd514c;" id="ppp">11111</span></div>
            <div class="clear"></div>
            <div class="pro_detail_number margin-t30">
                <div class="margin-r20 float-lt">数量</div>
                <div class=""> 
                    <i class="jian"></i>
                    <input id="666" type="hidden" name="username" value="{:get_username()}">
                    <input type="text" value="1" name="num" class="float-lt choose_input"/>
                    <i class="jia"></i> 
                    <span>&nbsp;</span>(库存<span id="bbb"></span>件)</div>
                <div class="clear"></div>
            </div>
            <div class="guige">
                <div class="margin-r20 float-lt" style="line-height:25px;">规格</div>
                <ul>
                
                
                <volist name="attr" id="v">
                   {$v['att']}
                    <select name="" id="">
                    
                        <volist name="v['val']" id="a">
                            
                            <li class="guige-cur"><option class="b66" value="{$a.id}">{$a.title}</option><li>
                        </volist>                        
                    </select>
                </volist>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div class="pro_detail_btn margin-t30">
                <ul>
                    <li class="pro_detail_shop"><a href="pay1.html">立即购买</a></li>
                    <li class="pro_detail_add">
                    <a href="">加入我的购物车</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <script>
		$(function(){
			$(".pro_tab li").each(function(i){
				$(this).click(function(){
					$(this).addClass("cur").siblings().removeClass("cur");
					$(".conlist .conbox").eq(i).show().siblings().hide();
				})
			})
		})
	</script>
    <div class="pro_con margin-t55" style="overflow:hidden;">
        <div class="pro_tab">
            <ul>
                <li class="cur">产品介绍</li>
                <li>评价</a></li>
            </ul>
        </div>
        <div class="conlist">
            <div class="conbox" style="display:block;">{$goods['des']}</div>
            <div class="conbox">
                <div class="pro_judge">
                    <ul>
                        <li class="cur">
                            <input name="RadioGroup1" type="radio" value="" checked="checked" id="RadioGroup1_0" />
                            全部（100）</li>
                        <li>
                            <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_1" />
                            好评（80）</li>
                        <li>
                            <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_2" />
                            中评（10）</li>
                        <li>
                            <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_3" />
                            差评（10）</li>
                    </ul>
                    <table width="100%" border="0">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="clear">&nbsp;</div>


<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********
                
                E-mail:****@****.gov.cn</p>
        </div>
    </div>
</div>
<div id="fade" class="black_overlay"> </div>
<div id="MyDiv" class="white_content">
    <div  style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;"> <span onclick="CloseDiv('MyDiv','fade')">
        <input type="button" class="addbtn">
        </span>商品加入货仓 </div>
    <div class="dialogbox">
        <p>商品添加成功！</p>
    </div>
</div>
</div>
<!--商品收藏成功DIV-->
</div>
<script type="text/javascript">
$(document).ready(function(){
	$(".jqzoom").imagezoom();
	$("#thumblist li a").mousemove(function(){
		$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
		$(".jqzoom").attr('src',$(this).find("img").attr("mid"));
		$(".jqzoom").attr('rel',$(this).find("img").attr("big"));
	});
});
$(function(){
    $("select").change(function(){
        var gid = {$goods.id};
        var attre = new Array();
        $("select").each(function(i,el){
            attre.push($(el).val());
        })
        attre.sort(function(a,b){
            return a-b;
        });
        $.post("{:U('price')}",{gid: gid,attre: attre},
            function(data){
                $('#ppp').html(data.sprice);
                $('#aaa').html(data.mprice);
                $('#bbb').html(data.num);
                $('.attrvid').html(data.ar);
                // var a= $('span .att').val('1');
                //  alert(a);
               // console.log(a);
            })
    })


     $('li.pro_detail_add').click(function(){
                var gid={$goods.id};
                var num=$('.choose_input').val();
                var name=$('#666').val();
                var ss=$('.attrvid').html();
                var r = /^[0-9]*[1-9][0-9]*$/;
                if(!r.test(num)){
                    alert('购买数量必须为正整数');
                }    
        $.post("{:U('Shops/add')}",{ gid:gid,num:num,name:name,ss:ss },
           function(data){
            if(data.status==1){
                alert(data.info);
            }else{
                alert(data.info);
            }
           });
        });
})
$(function(){ 
      $('.jia').click(function(){
          var index = $('.jia').index($(this));
          var num=$('input[name=num]').eq(index).val();
            num++;
              var r = /^[0-9]*[1-9][0-9]*$/;
                if(!r.test(num)){
                    num=Math.floor(num);
                }
              $('input[name=num]').eq(index).val(num);     
        });
     $('.jian').click(function(){
         var index = $('.jian').index($(this));
           var num=$('input[name=num]').eq(index).val();
            num--;
              var r = /^[0-9]*[1-9][0-9]*$/;
                if(!r.test(num)){
                    num=Math.floor(num);
                }
                if (num<1) {
                  num=1;
                }
                $('input[name=num]').eq(index).val(num);
              });
       });
</script>
</body>
</html>
